<style lang="less">	
    #profile_tabs {
        margin: -30px -20px 20px -20px;
        .el-tab-pane {
            padding: 15px 50px;
        }
        .el-tabs {
            margin-bottom: -60px;
        }
        .el-tabs__item.is-active {
            border-top: 1px solid #3aa5e6;
            border-radius: 0 !important;
        }
    }
</style>
<template>
    <div id="profile_tabs">  
        <el-tabs type="card" v-model="activeTabName">
            <el-tab-pane label="个人信息" name="tab1">
                <el-form ref="editForms.tab1Form" :model="editForms.tab1Form.vo" :rules="editForms.tab1Form.rules" label-width="80px">
                    <el-form-item label="姓名:">
                        <span>{{curUser.userName}}</span>
                    </el-form-item>
                    <el-form-item label="部门:">
                        <span>{{curUser.departmentName}}</span>
                    </el-form-item>  
                    <el-form-item label="岗位:">
                        <span>{{curUser.postName}}</span>
                    </el-form-item>                    
                    <el-form-item label="性别:">
                        <el-switch v-model="editForms.tab1Form.vo.sex_switch" on-text="男" off-text="女"></el-switch>
                    </el-form-item>                    
                    <el-form-item label="手机号:" prop="phone">
                        <el-input v-model="editForms.tab1Form.vo.phone"></el-input>
                    </el-form-item>  
                    <el-form-item>
                        <el-button type="primary" @click="saveMyProfile">保存</el-button>
                    </el-form-item>                                 
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="登录信息" name="tab2">
                 <el-form ref="editForms.tab2Form" :model="editForms.tab2Form.vo" :rules="editForms.tab2Form.rules" label-width="100px">
                    <el-form-item label="登录账号:">{{curUser.loginName}}</span>
                    </el-form-item>
                    <el-form-item label="登录密码:">
                        <span>为保障您帐号安全，建议您定期修改登录密码。</span>
                        <el-button type="info" size="mini" @click="toggleChangePwdFun">修改登录密码</el-button>
                    </el-form-item>  
                    <template v-if="editForms.tab2Form.toggleChangePwd">
                    <el-form-item label="旧密码:" prop="oldpwd">
                        <el-input type="password" v-model="editForms.tab2Form.vo.oldpwd"></el-input>
                    </el-form-item>  
                    <el-form-item label="新密码:" prop="password">
                        <el-input type="password" v-model="editForms.tab2Form.vo.password"></el-input>
                    </el-form-item>               
                    <el-form-item label="重复密码:" prop="confirmpwd">
                        <el-input type="password" v-model="editForms.tab2Form.vo.confirmpwd"></el-input>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary" @click="changepwdFun">确认修改密码</el-button>
                    </el-form-item>  
                    </template>          
                </el-form>               
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import WUtil from '../../common/util.js'
    export default {
        props: {
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if(WUtil.vad.isBlank(value)) {
                    callback(new Error('请输入密码'));
                } else if(this.editForms.tab2Form.vo.password != this.editForms.tab2Form.vo.confirmpwd) {
                    callback(new Error('两次密码输入不一致'));
                } else {
                    callback();
                }
            };              
        	return {
        		activeTabName: 'tab1',
                editForms: {
                    tab1Form: {
                        vo: {
                            sex: '',
                            sex_switch: true,
                            phone: ''
                        },
                        rules: {
                            phone: [
                                { required: true, message: '请输入手机号', trigger: 'blur' }
                            ]
                        }
                    },
                    tab2Form: {
                        toggleChangePwd: false,
                        vo: {
                            loginName: '',
                            oldpwd:'',
                            password: '',
                            confirmpwd: ''
                        },
                        rules: {
                            oldpwd: [
                            { required: true, message: '请输入旧密码', trigger: 'blur' },
                            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
                            ],
                            password: [
                            { required: true, message: '请输入新密码', trigger: 'blur' },
                            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
                            ],
                            confirmpwd: [
                            { required: true, message: '请输入确认密码', trigger: 'blur' },
                            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' },
                            { validator: validatePass, trigger: 'blur' }
                            ]                           
                        }
                    }
                }
        	}
        },
        computed: {
            curUser() {
                let user_ =  this.$store.getters.auth_user;
                if(user_) {
                    this.editForms.tab1Form.vo.sex = user_.sex;
                    this.editForms.tab1Form.vo.sex_switch = (1 == user_.sex ? true : false);
                    this.editForms.tab1Form.vo.phone = user_.phone;
                }
                return user_;
            }
        },
        methods: {
            toggleChangePwdFun() {
                this.editForms.tab2Form.toggleChangePwd = !this.editForms.tab2Form.toggleChangePwd;
            },
            changepwdFun() { //修改密码事件
              this.$refs['editForms.tab2Form'].validate((valid) => {
                if (valid) {
                  this.submitChangepwd();
                } else {
                  return false;
                }
              });                
            },
            submitChangepwd() { //提交修改密码
              this.$http.put('/ws/sys/changepwd', this.editForms.tab2Form.vo).then(response => {
                var res = response.body;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                  this.$message({
                    message: '修改密码成功',
                    type: 'success'
                  });
                  this.editForms.tab2Form.toggleChangePwd = false;
                  this.resetTab2Form();
                } else {
                  this.$message.error(resMeta.message);
                }
              });
            },
            resetTab2Form() { //重置
                this.$refs['editForms.tab2Form'].resetFields();
            },
            saveMyProfile() {
              //保存修改我的配置信息
              this.$refs['editForms.tab1Form'].validate((valid) => {
                if (valid) {
                  this.changeMyProfile();
                } else {
                  return false;
                }
              });                 
            },
            changeMyProfile() { //修改我的配置信息
              this.editForms.tab1Form.vo.sex = this.editForms.tab1Form.vo.sex_switch ? "1" : "2";
              this.$http.put('/ws/sys/changeprofile', this.editForms.tab1Form.vo).then(response => {
                var res = response.body;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                  this.$message({
                    message: '修改个人信息成功',
                    type: 'success'
                  });
                } else {
                  this.$message.error(resMeta.message);
                }
              });
            }
        }
    }
</script>